<template>
  <div class="main">
    <div ref="testBar" class="barChart"></div>
  </div>
</template>

<script>
export default {
  name: "bar",
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 引入数据
      let chartList = [8, 4, 7, 6, 5, 3, 3, 9, 6];
      let myChart = this.$echarts.init(this.$refs.testBar);
      let option = {
        // 设置颜色组
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          // 设置渐变
          colorStops: [
            {
              offset: 0,
              color: "rgba(51,244,164,0.7)",
            },
            {
              offset: 1,
              color: "rgba(51,244,164,0)",
            },
          ],
          global: false,
        },
        // 设置图例
        legend: {
          show: true,
          top: "5%",
          right: "10%",
          icon: "circle",
          textStyle: {
            color: "rgb(255,255,255)",
          },
        },

        grid: {
          top: "20%",
          right: "8%",
          bottom: "13%",
          left: "10%",
        },
        xAxis: {
          type: "category",
          data: [
            "小学",
            "中学",
            "大学",
            "幼儿园",
            "医院",
            "福利院",
            "其他",
            "智能监控系统",
            "智能系统",
          ],
          axisLabel: {
            color: "#ffffff",
            // rotate: 40,
            interval: 0,
            // 类目名超过4个字换行
            formatter: function (params) {
              let newParamsName = ""; // 最终拼接成的字符串
              let paramsNameNumber = params.length; // 实际标签的个数
              let provideNumber = 3; // 每行能显示的字的个数
              let rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
              /**
               * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
               */
              // 条件等同于rowNumber>1
              if (paramsNameNumber > provideNumber) {
                /** 循环每一行,p表示行 */
                for (let p = 0; p < rowNumber; p++) {
                  let tempStr = ""; // 表示每一次截取的字符串
                  let start = p * provideNumber; // 开始截取的位置
                  let end = start + provideNumber; // 结束截取的位置
                  // 此处特殊处理最后一行的索引值
                  if (p == rowNumber - 1) {
                    // 最后一次不换行
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    // 每一次拼接字符串并换行
                    tempStr = params.substring(start, end) + "\n";
                  }
                  newParamsName += tempStr; // 最终拼成的字符串
                }
              } else {
                // 将旧标签的值赋给新标签
                newParamsName = params;
              }
              //将最终的字符串返回
              return newParamsName;
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          min: 0,
          max: 10,
          interval: 2,
          name: "场所/个数",
          nameLocation: "end",
          nameTextStyle: {
            color: "#ffffff",
          },
          splitLine: {
            show: false,
            // lineStyle: {
            //   color: 'rgba(196,177,252,0.37)',
            //   type: 'dashed'
            // }
          },
          axisLabel: {
            color: "#ffffff",
            show: true,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
        },
        series: [
          {
            data: chartList,
            name: "监控场所/个数",
            type: "bar",
            barWidth: 15,
            barCategoryGap: 0,
            itemStyle: {
              barBorderRadius: [10, 10, 5, 5],
            },
          },
        ],
      };
      option && myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>

<style scoped>
.main {
  width: 100%;
  height: 100%;
}
.barChart {
  width: 100%;
  height: calc(100% - 0.0625rem);
  box-sizing: border-box;
}
</style>
